<script setup>
import { ref, watch } from 'vue'
import { RouterLink } from 'vue-router'
import { useScroll } from '@vueuse/core'

const nav = ref(null)
const { y } = useScroll(window)

watch(y, () => {
  if (y.value >= 40) {
    nav.value.style.top = '0'
  }
  // else {
  //   nav.value.style.top = '-100%'
  // }
})

</script>

<template>
  <div class="fix-content" ref="nav">
    <div class="mask">
      <div class="container">
        <ul>
          <li>
            <RouterLink to="/"><i class="iconfont icon-home"></i>首页</RouterLink>
          </li>
          <li>
            <a href="http://shop.xduyg.top" target="_blank"><i class="iconfont icon-icon-test"></i>小兔鲜电商</a>
          </li>
          <li>
            <a href="https://github.com/yagaoyg/yagao" target="_blank"><i
                class="iconfont icon-GitHub"></i>本项目GitHub地址</a>
          </li>
          <li>
            <RouterLink to="/"><i class="iconfont icon-error"></i>施工中</RouterLink>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.fix-content {
  position: fixed;
  // top: -100%;
  // top: -20px;
  z-index: 1000;

  width: 100%;
  height: 40px;
  

  line-height: 1;

  @fz: 18px;
  font-size: @fz;

  transition: all 0.5s;

  .mask {
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 2px solid rgb(0, 255, 0);

  .container {
      border: 2px solid red;

         ul {
        display: flex;
        justify-content: center;
        align-content: center;
        margin: 0;
        // padding: ((40px - @fz)/2) 0;
        padding: 10px 0;
        height: 40px;
        list-style-type: none;
        color: @wtext;

        // border: 2px solid red;
        
        li {
          padding: 0 30px;
          border-right: 1px solid @wtext;


          a {
            width: 100%;
            color: @wtext;
            text-decoration: none;
          }

          &:last-child {
            border-right: none;
          }
        }
      }
    }
  }
}
</style>